<template>
  <h2>姓名:{{ persion.name }}</h2>
  <h2>年龄:{{ persion.age }}</h2>
  <h2>薪水:{{ persion.job.j1.salary }}</h2>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    let persion = reactive({
      name: '张三',
      age: 22,
      job: {
        j1: {
          salary: 24,
        },
      },
    })
    function changeInfo() {
      persion.name += '!'
      persion.age++
      persion.job.j1.salary++
    }

    return {
      persion,
      changeInfo,
    }
  },
}
</script>
